

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  	<title>Sliding Login Panel</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />	

	<!-- stylesheets -->
  	<link rel="stylesheet" href="../CSS/slide.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="../CSS/style.css" type="text/css" media="screen" />
  	<!-- PNG FIX for IE6 -->
  	<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
	<script type="text/javascript" src="../JQuery/pngfix/supersleight-min.js"></script>
	 
    <!-- jQuery - the core -->
	<script src="../JQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
	<!-- Sliding effect -->
	<script src="../JQuery/slide.js" type="text/javascript"></script>

</head>

<body>
<div id="header">
			<div id="logo">
				<a href="index.html"><img src="../images/logo.jpg" alt="" /></a>		
			</div>		
			<ul>
				<li><a href="index.html"><span>home</span></a></li>
				<li><a href="aboutus.html"><span>about us</span></a></li>
				<li><a href="contact.html"><span>contact us</span></a></li>		
				<li class="selected"><a href="login.html"> <span> Login </span> </a> </li>	
			</ul>
	</div>
	<div id="body">
	  <div id="pic">	</div> 
	  <div class="register">
			<h1>Login</h1>
			<div id="content">
          	
			
        

    </div><!-- END #content -->

   </div>
  </div>
<!-- Panel -->
<div id="toppanel">
	<div id="panel">
		<div class="content clearfix">
			<div class="left">
				<h1>Welcome to WorkerTrack!</h1>
				<h2>WorkerTrack</h2>		
				<p class="grey">The best way to find the most suitable candidates for a job</p>
			</div>
			<div class="left">
				<!-- Login Form -->
				<form class="clearfix" action="#" method="post">
					<h1>Member Login</h1>
					<label class="grey" for="log">Username:</label>
					<input class="field" type="text" name="log" id="log" value="" size="23" />
					<label class="grey" for="pwd">Password:</label>
					<input class="field" type="password" name="pwd" id="pwd" size="23" />
	            	<label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> &nbsp;Remember me</label>
        			<div class="clear"></div>
					<input type="submit" name="submit" value="Login" class="bt_login" />
					<a class="lost-pwd" href="#">Lost your password?</a>
				</form>
			</div>
			<div class="left right">			
				<!-- Register Form -->
				<form action="#" method="post">
					<div id="Register">
					<h1>Not a member yet? Sign Up!</h1>				
					<label class="grey" for="signup">Job Seekers Click Here!</label>
					<a href="regworker.html"><img src="../images/JobSeeker.jpg" alt="" /></a><br>
					<label class="grey" for="email">Employers Click Here!</label>
					<a href="regemployer.html"><img src="../images/Employer.jpg" alt="" /></a>
					</div>
				</form>
			</div>
		</div>
</div> <!-- /login -->	

	<!-- The tab on top -->	
	<div class="tab">
		<ul class="login">
			<li class="left">&nbsp;</li>
			<li>Hello Guest!</li>
			<li class="sep">|</li>
			<li id="toggle">
				<a id="open" class="open" href="#">Log In</a>
				<a id="close" style="display: none;" class="close" href="#">Close</a>			
			</li>
			<li class="right">&nbsp;</li>
		</ul> 
	</div> <!-- / top -->
	
</div> <!--panel -->
</body>
</html>
